<script setup>
import { onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
import HeadBody from './HeadBody.vue'
import { useRouter } from 'vue-router';

const router=useRouter();
const functional = ref([
    { content: "论坛交流" },
    { content: "个人中心" },
    { content: "平台公告" },
    { content: "兼职" }
])
// 点击事件
const selection = (index) => {
    switch (index) {
        case 0:
            router.push('/ForumPage')
            break;
        case 1:
            router.push('')
            break;
        case 2:
            router.push('')
            break;
        case 3:
            router.push('/MerchantIndex')
            break;
    }
}
// 控制navigation2动态类名
const Controlnavi = ref(false)
// 组件挂载时监听滚动条
onMounted(() => {
    window.addEventListener('scroll', handleScroll)
})
// 组件卸载前移除监听滚动条
onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll);
})
// 定义滚动事件
const handleScroll = (event) => {
    // 滚动高度
    const Rollheight = window.scrollY;
    if (Rollheight >= 65) {
        Controlnavi.value = true;
    } else {
        Controlnavi.value = false;
    }
}
</script>
<template>
    <div class="all_out">
        <div class="navigation_out">
            <div class="navigation1">
                <div class="nav_out1">
                    <div class="name_type">欢迎来到GigGo兼职平台</div>
                </div>
                <div class="nav_out2">
                    <div class="out2_1">

                    </div>
                    <div class="out2_1">
                        <div class="letter_out">
                            <div class="letter_text">平台信箱</div>
                        </div>
                        <div class="login_out">
                            <div class="login_text">登录 | 注册</div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="navigation2" :class="{ 'navigation2_2': Controlnavi }">
                <div class="logo_out">
                    <div class="logoimg">
                        <img style="width:50px;height: 50px;" src="/src/assets/homepage/img/兼职机构.png" alt="">
                        <div class="logo_text">
                            兼职平台
                        </div>
                    </div>
                </div>
                <div class="functional_zone">
                    <div class="input_out">
                        <input type="text" class="input_type" placeholder="输入关键字" />
                        <button class="button_type">查找</button>
                    </div>
                    <div class="forum" v-for="(item, index) in functional" :key="index">
                        <div @click="selection(index)" class="forum_item">{{ item.content }}</div>
                    </div>
                </div>
            </div>
        </div>
        <HeadBody></HeadBody>
    </div>
</template>
<style scoped>
#app {
  padding: 0px;
  margin: 0px;
}

.all_out {
  width: 100%;
}
.navigation_out {
  width: 100%;
}

.navigation1 {
  width: 100%;
  height: 50px;
  background-color: black;
  display: flex;
}

#navigation2 {
    width: 100%;
    height: 100px;
    background-color: rgb(91, 88, 88);
    display: flex;
}
.navigation2 {
  width: 100%;
  height: 100px;
  background-color: rgb(91, 88, 88);
  display: flex;
}

.navigation2_2 {
    position: fixed;
    top: 0px;
    z-index: 999;
}

.nav_out1 {
  flex: 1;
}

.name_type {
  font-size: 18px;
  color: white;
  font-weight: 600;
  height: 50px;
  line-height: 50px;
  margin-left: 50px;
}

.nav_out2 {
  flex: 1;
  display: flex;
}

.out2_1 {
  flex: 1;
  display: flex;
  margin-right: 20px;
}

.letter_out {
  width: 50%;
  display: flex;
  justify-content: end;
  align-items: center;
}

.letter_text {
  width:auto;
  color: white;
  font-size: 16px;
  transition: color 0.3s ease;
}

.letter_text:hover {
  cursor: pointer;
  color: rgb(241, 229, 3);
}

.login_out {
  width: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_text {
  font-size: 16px;
  width: auto;
}

.login_text:hover {
  cursor: pointer;
}

.logo_out {
  flex: 1;
  display: flex;
  padding-left: 40px;
}

.functional_zone {
    flex: 1.5;
    display: flex;
    justify-content: space-around;
  flex: 1.5;
  display: flex;
  justify-content: space-around;
}

.logoimg {
  display: flex;
  align-items: center;
}

.logo_text {
  font-size: 20px;
  color: #FF8712;
  margin-left: 10px;
}

.input_out {
    /* border:1px solid red; */
    display: flex;
    align-items: center;
}

.input_type {
    width: 300px;
    height: 30px;
    border: none;
    outline: none;
}

.button_type {
    width: 60px;
    height: 33px;
    background-color: #FF8712;
    border: none;
    margin-left: 10px;
    color: white;
}

.button_type:hover {
    cursor: pointer;
    color: black;
}

.forum {
    /* border:1px solid white; */
    display: flex;
    align-items: center;
}

.forum_item {
    font-size: 16px;
    color: white;
}

.forum_item:hover {
    cursor: pointer;
    color: black;
  /* border:1px solid red; */
  display: flex;
  align-items: center;
}

.input_type {
  width: 300px;
  height: 30px;
  border: none;
  outline: none;
}

.button_type {
  width: 60px;
  height: 33px;
  background-color: #FF8712;
  border: none;
  margin-left: 10px;
  color: white;
}

.button_type:hover {
  cursor: pointer;
  color: black;
}

.forum {
  /* border:1px solid white; */
  display: flex;
  align-items: center;
}

.forum_item {
  font-size: 16px;
  color: white;
}

.forum_item:hover {
  cursor: pointer;
  color: black;
}
</style>